<template>
<el-container>
  <el-aside>
    <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">建立索引</el-button>
      <div slot="tip" class="el-upload__tip">请选取文件</div>
    </el-upload>
  </el-aside>
  <el-main>
    <el-input
        class="input"
        placeholder="标题"
        v-model="title"
        clearable>
    </el-input>
    <el-input
        class="input"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 8}"
        placeholder="摘要"
        v-model="digest">
    </el-input>

    <el-input
        class="input"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 8}"
        placeholder="内容"
        v-model="content">
    </el-input>
  </el-main>
</el-container>
</template>

<script>
export default {
  name: "IndexCreate",
  data() {
    return {
      title: '',
      digest: '',
      content: '',
      fileList: []
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file)
      this.title = file.name
      console.log(this.fileList)
    }
  }
}
</script>

<style scoped>
.input{
  margin: 10px;
  width: 80%;
}
</style>